<template>
  <div>
    <div style="padding: 10px;">
      <vxe-radio-group v-model="search.status" @change="loadData">
        <vxe-radio label="wait" content="未开始"></vxe-radio>
        <vxe-radio label="doing" content="进行中"></vxe-radio>
        <vxe-radio label="done" content="已完成"></vxe-radio>
        <vxe-radio label="closed" content="已关闭"></vxe-radio>
      </vxe-radio-group>

      <span style="padding-left: 20px;background: green;;" v-if="search.project_id > 0"
        @click="search.project_id = 0; search.project_name = ''; loadData()">{{ search.project_name }}</span>
      <el-button @click="loadData" type="primary" style="margin-left: 10px;;">刷新</el-button>
      <el-button @click="newTask" type="primary" style="margin-left: 10px;;">新任务</el-button>
    </div>

    <vxe-table :data="tableData" :row-config="{ isHover: true }" :show-header-overflow="true"
      :column-config="{ resizable: true }" :header-cell-style="headerCellStyle">
      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
      <vxe-column field="name" title="任务标题" mix-width="500">
        <template #default="{ row }">
          <span class="click" :class="'title-' + row.status" @click="toTaskDetail(row)" style="cursor: pointer">
            {{ row.name }}
          </span>
        </template>
      </vxe-column>
      <vxe-column field="status" title="状态" width="80">
        <template #default="{ row }">
          <span v-if="row.status == 'done'" style="color: green;">完成</span>
          <span v-else-if="row.status == 'closed'" style="color: #ccc;">关闭</span>
          <span v-else-if="row.status == 'wait'">未开始</span>
          <span v-else-if="row.status == 'doing'" style="color: #ff6f42;">进行中</span>
          <span v-else>{{ row.status }}</span>
        </template>
      </vxe-column>
      <vxe-column field="project_name" title="项目" width="150">
        <template #default="{ row }">
          <span @click="search.project_id = row.project; search.project_name = row.project_name; loadData()"
            style="color: green;">{{ row.project_name }}</span>
        </template>
      </vxe-column>
      <vxe-column field="lastEditedDate" title="创建时间" width="150"></vxe-column>
      <vxe-column field="assignedTo" title="指派给" width="120"></vxe-column>
      <vxe-column field="finishedDate" title="完成时间" width="150" sort></vxe-column>
      <vxe-column field="id" title="id" width="60"></vxe-column>

      <!-- <vxe-colgroup title="Group1">
                <vxe-column field="sex" title="Sex"></vxe-column>
                <vxe-column field="address" title="Address"></vxe-column>
            </vxe-colgroup> -->
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { layer } from "@layui/layer-vue";

import axios from "axios";
const httpReq = axios.create({
  timeout: 15000,
})

const tableData = ref([])
const search = ref({ status: "wait", project_id: 0, project_name: '', })

const urlParams = new URLSearchParams(window.location.search);
const status = urlParams.get('status');
const project_id = urlParams.get('project_id');
if (!status) {
  search.value.status = 'wait'
  document.title = "任务列表 -【未开始任务】"
} else {
  search.value.status = status
  document.title = "任务列表"
}

if (project_id) {
  search.value.project_id = project_id
}


loadData();

function loadData() {
  urlParams.set('status', search.value.status);
  urlParams.set('project_id', search.value.project_id);
  const newUrl = new URL(window.location.toString());
  newUrl.search = urlParams.toString();
  history.pushState({}, '', newUrl);

  // 禅道地址
  httpReq.post("http://xxx.xxx.xxx/index.php?action=getTaskList", { "search": search.value }).then(resp => {
    tableData.value = resp.data
  })
}

function toTaskDetail(row: any) {
  layer.open({
    type: 2,
    title: row.name,
    content: '/zentao/task-view-' + row.id + '.html',
    area: ['99%', '99%'],
    end: function () {
      loadData()
    },
  })
}
function newTask() {
  layer.open({
    type: 2,
    title: "新任务，请选择相应的迭代",
    content: '/zentao/project-execution-undone-' + search.value.project_id + '.html',
    area: ['99%', '99%'],
    end: function () {
      loadData()
    },
  })
}
</script>

<style scoped>
.title-done {
  color: green;
}

.title-closed {
  color: #999;
}

.title-doing {
  color: #ff6f42;
}
</style>